<template>
    <div>
<h1>练习vue3语法</h1>
<h1>{{msg}}</h1>
<h1>{{num}}</h1>
<h1>{{obj.name}}</h1>
<input type="text" v-model="obj.name">
<input type="text" v-model="num">
<button @click="add">加</button>
<button @click="showObj">展示对象</button>
<h1>{{arr}}</h1>
<ul>
    <li v-for="(item,index) in arr" :key="index">
    <div>
        {{item}}
    </div></li>
</ul>
    </div>
</template>

<script lang="ts">
import { defineComponent,reactive,ref } from 'vue'

export default defineComponent({
    setup () {
//         let msg='牛啊牛啊'
// let num =0;
// function add(){
//     console.log(num)
// }
let msg =ref('牛啊牛啊');
let num = ref(0);
function add(){
    console.log(num)
    console.log(num.value);
    num.value+=1;
}
// let obj=ref({
//         name:'tom',
//         age:18
//     })
let obj=reactive({
    name:"bbb",
    age:18
});
let arr=reactive([1,2,3])
    function showObj(){
        console.log(obj)
           }
        return {
            msg,
            num,
            add,
            obj,
            showObj,
            arr
          
        }
    }
})
</script>

<style scoped>

</style>